<template>
    <span>
        <transition name="fade">
            <div :class="maskClasses" v-show="visible" @click="mask"></div>
        </transition>
        <div :class="wrapClasses" @click="handleWrapClick">
            <transition name="ease">
                <div :class="classes" :style="mainStyles" v-show="visible">
                    <div :class="[prefixCls + '-content']">
                        <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div
                          :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
                        <div :class="[prefixCls + '-body']"><slot></slot></div>
                        <div :class="[prefixCls + '-footer']" v-if="!footerHide">
                            <slot name="footer">
                              <!-- <el-button @click.native="cancel">Cancel</el-button>-->
                               <el-button type="primary" @click.native="ok">Ok</el-button>
                            </slot>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </span>
</template>
<style scoped>
  .ivu-modal {
    width: auto;
    margin: 0 auto;
    position: relative;
    outline: none;
    top: 100px;
  }

  .ivu-modal-hidden {
    display: none !important;
  }

  .ivu-modal-wrap {
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
    outline: 0;
  }

  .ivu-modal-wrap * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .ivu-modal-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(55, 55, 55, 0.6);
    height: 100%;
    z-index: 1000;
  }

  .ivu-modal-mask-hidden {
    display: none;
  }

  .ivu-modal-content {
    position: relative;
    background-color: #fff;
    border: 0;
    border-radius: 6px;
    background-clip: padding-box;
  }

  .ivu-modal-header {
    border-bottom: 1px solid #e3e8ee;
    padding: 14px 16px;
    line-height: 1;
  }

  .ivu-modal-header p,
  .ivu-modal-header-inner {
    display: inline-block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #464c5b;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ivu-modal-close {
    font-size: 12px;
    position: absolute;
    right: 16px;
    top: 8px;
    overflow: hidden;
    cursor: pointer;
  }

  .ivu-modal-close .ivu-icon-ios-close-empty {
    font-size: 31px;
    color: #999999;
    transition: color 0.2s ease;
    position: relative;
    top: 1px;
  }

  .ivu-modal-close .ivu-icon-ios-close-empty:hover {
    color: #444;
  }

  .ivu-modal-body {
    padding: 16px;
    font-size: 12px;
    line-height: 1.5;
  }

  .ivu-modal-footer {
    border-top: 1px solid #e3e8ee;
    padding: 12px 18px 12px 18px;
    text-align: right;
  }

  .ivu-modal-footer button + button {
    margin-left: 8px;
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    .ivu-modal {
      width: auto !important;
      margin: 10px;
    }

    .vertical-center-modal .ivu-modal {
      flex: 1;
    }
  }

  .ivu-modal-confirm {
    padding: 0 4px;
  }

  .ivu-modal-confirm-head-title {
    display: inline-block;
    font-size: 14px;
    color: #464c5b;
    font-weight: 700;
  }

  .ivu-modal-confirm-body {
    margin-top: 6px;
    padding-left: 48px;
    padding-top: 18px;
    font-size: 12px;
    color: #657180;
    position: relative;
  }

  .ivu-modal-confirm-body-icon {
    font-size: 36px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .ivu-modal-confirm-body-icon-info {
    color: #3399ff;
  }

  .ivu-modal-confirm-body-icon-success {
    color: #00cc66;
  }

  .ivu-modal-confirm-body-icon-warning {
    color: #ff9900;
  }

  .ivu-modal-confirm-body-icon-error {
    color: #ff3300;
  }

  .ivu-modal-confirm-body-icon-confirm {
    color: #ff9900;
  }

  .ivu-modal-confirm-footer {
    margin-top: 40px;
    text-align: right;
  }

  .ivu-modal-confirm-footer button + button {
    margin-left: 8px;
    margin-bottom: 0;
  }
</style>
<script>
  let cached;
  function getScrollBarSize(fresh) {
    if (fresh || cached === undefined) {
      const inner = document.createElement('div');
      inner.style.width = '100%';
      inner.style.height = '200px';

      const outer = document.createElement('div');
      const outerStyle = outer.style;

      outerStyle.position = 'absolute';
      outerStyle.top = 0;
      outerStyle.left = 0;
      outerStyle.pointerEvents = 'none';
      outerStyle.visibility = 'hidden';
      outerStyle.width = '200px';
      outerStyle.height = '150px';
      outerStyle.overflow = 'hidden';

      outer.appendChild(inner);

      document.body.appendChild(outer);

      const widthContained = inner.offsetWidth;
      outer.style.overflow = 'scroll';
      let widthScroll = inner.offsetWidth;

      if (widthContained === widthScroll) {
        widthScroll = outer.clientWidth;
      }

      document.body.removeChild(outer);

      cached = widthContained - widthScroll;
    }
    return cached;
  }
  const prefixCls = 'ivu-modal';

  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      },
      closable: {
        type: Boolean,
        default: true
      },
      maskClosable: {
        type: Boolean,
        default: true
      },
      title: {
        type: String
      },
      width: {
        type: [Number, String],
        default: 680
      },
      okText: {
        type: String,
        default () {
          return 'ok';
        }
      },
      cancelText: {
        type: String,
        default () {
          return 'cancel';
        }
      },
      loading: {
        type: Boolean,
        default: false
      },
      styles: {
        type: Object
      },
      className: {
        type: String
      },
      // for instance
      footerHide: {
        type: Boolean,
        default: false
      },
      scrollable: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        prefixCls: prefixCls,
        wrapShow: false,
        showHead: true,
        buttonLoading: false,
        visible: this.value
      };
    },
    computed: {
      wrapClasses () {
        return [
          `${prefixCls}-wrap`,
          {
            [`${prefixCls}-hidden`]: !this.wrapShow,
            [`${this.className}`]: !!this.className
          }
        ];
      },
      maskClasses () {
        return `${prefixCls}-mask`;
      },
      classes () {
        return `${prefixCls}`;
      },
      mainStyles () {
        let style = {};

        const styleWidth = {
          width: `${this.width}px`
        };

        const customStyle = this.styles ? this.styles : {};

        Object.assign(style, styleWidth, customStyle);

        return style;
      }
    },
    methods: {
      close () {
        this.visible = false;
        this.$emit('input', false);
        this.$emit('on-cancel');
      },
      mask () {
        if (this.maskClosable) {
          this.close();
        }
      },
      handleWrapClick (event) {
        // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
        const className = event.target.getAttribute('class');
        if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.mask();
      },
      cancel () {
        this.close();
      },
      ok () {
        if (this.loading) {
          this.buttonLoading = true;
        } else {
          this.visible = false;
          this.$emit('input', false);
        }
        this.$emit('on-ok');
      },
      EscClose (e) {
        if (this.visible && this.closable) {
          if (e.keyCode === 27) {
            this.close();
          }
        }
      },
      checkScrollBar () {
        let fullWindowWidth = window.innerWidth;
        if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
          const documentElementRect = document.documentElement.getBoundingClientRect();
          fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
        }
        this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
        if (this.bodyIsOverflowing) {
          this.scrollBarWidth = getScrollBarSize();
        }
      },
      setScrollBar () {
        if (this.bodyIsOverflowing && this.scrollBarWidth !== undefined) {
          document.body.style.paddingRight = `${this.scrollBarWidth}px`;
        }
      },
      resetScrollBar () {
        document.body.style.paddingRight = '';
      },
      addScrollEffect () {
        this.checkScrollBar();
        this.setScrollBar();
        document.body.style.overflow = 'hidden';
      },
      removeScrollEffect() {
        document.body.style.overflow = '';
        this.resetScrollBar();
      }
    },
    mounted () {
      if (this.visible) {
        this.wrapShow = true;
      }

      let showHead = true;

      if (this.$slots.header === undefined && !this.title) {
        showHead = false;
      }

      this.showHead = showHead;

      // ESC close
      document.addEventListener('keydown', this.EscClose);
    },
    beforeDestroy () {
      document.removeEventListener('keydown', this.EscClose);
      this.removeScrollEffect();
    },
    watch: {
      value (val) {
        this.visible = val;
      },
      visible (val) {
        if (val === false) {
          this.buttonLoading = false;
          this.timer = setTimeout(() => {
            this.wrapShow = false;
            this.removeScrollEffect();
          }, 300);
        } else {
          if (this.timer) clearTimeout(this.timer);
          this.wrapShow = true;
          if (!this.scrollable) {
            this.addScrollEffect();
          }
        }
      },
      loading (val) {
        if (!val) {
          this.buttonLoading = false;
        }
      },
      scrollable (val) {
        if (!val) {
          this.addScrollEffect();
        } else {
          this.removeScrollEffect();
        }
      }
    }
  };
</script>
